<template>
  <div style="min-height: calc(100vh - 460px)">
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      labelAlign="left"
      :label-col="{ style: { width: '80px' } }"
      :wrapper-col="{ span: 12 }"
    >
      <a-row v-if="userpwd">
        <a-col :span="12">
          <a-form-item label="原始密码" :colon="false" name="original_password">
            <a-input
              style="margin-left: 12px"
              v-model:value="formState.original_password"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-else>
        <a-col :span="12">
          <a-form-item :colon="false" label="密码" name="password">
            <a-input
              style="margin-left: 12px"
              v-model:value="formState.password"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-if="userpwd">
        <a-col :span="12">
          <a-form-item :colon="false" label="新密码" name="password">
            <a-input
              style="margin-left: 12px"
              v-model:value="formState.password"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item :colon="false" label="确认密码" name="confirm_password">
            <a-input
              style="margin-left: 12px"
              v-model:value="formState.confirm_password"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from "@/stores/menuStore";
import { computed, onMounted } from "vue";
import { setPassword, setPasswordAgin } from "../../../../Api/work";
import { message } from "ant-design-vue";
const store = useUserStore();
const userpwd = computed(()=>{
 return store.user?.userpwd;
});
const formRef = ref(null);

const check = async (_rule, value) => {
  if (!value) {
    return Promise.reject("请输入");
  }
  if (value.length < 6) {
    return Promise.reject("不少于6位");
  } else {
    return Promise.resolve();
  }
};
const check2 = async (_rule, value) => {
  if (!value) {
    return Promise.reject("请输入");
  }
  if (value != formState.value.password) {
    return Promise.reject("密码不一致");
  } else {
    return Promise.resolve();
  }
};

const rules = {
  original_password: [{ required: true, message: "请输入", trigger: "change" }],
  password: [{ required: true, validator: check, trigger: "change" }],
  confirm_password: [{ required: true, validator: check2, trigger: "change" }],
};

const formState = ref({
  original_password: "",
  password: "",
  confirm_password: "",
});

const confirm = async () => {
  formRef.value
    .validate()
    .then(async () => {
      const res = await (userpwd.value
        ? setPasswordAgin(formState.value)
        : setPassword(formState.value));
      console.log("res", res);
      if (res?.data?.code == 1) {
        message.success("操作成功");
        store.setUser();
        // userpwd.value = formState.value.password;
      } else {
        message.error(res?.data?.msg);
      }
    })
    .catch((error) => {
      console.log("error", error);
    });
};

const cancel = () => {
  formRef.value.resetFields();
};

defineExpose({
  confirm,
  cancel,
});


</script>

<style lang="scss" scoped>
</style>
